import { connect } from 'dva';
import BaseComponent from '@/components/BaseComponent';
import { Button, Modal, Icon, Upload } from 'antd';
import Dragger from 'antd/lib/upload/Dragger';
import file from '@/locales/zh-CN/file';
@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
class ImgFolderUpload extends BaseComponent {
  state = {
    visible: false,
    fileList: [],
  };

  openModal = () => {
    this.setState({
      visible: true,
    });
  };

  closeModel = () => {
    this.setState({
      visible: false,
    });
  };

  handleBeforeUpload = (file, fileList) => {
    const { type } = file;
    if (
      type != 'application/pdf' &&
      type != 'image/jpeg' &&
      type != 'image/png' &&
      type != 'image/jpg' &&
      type != 'image/webp'
    ) {
      file.status = 'error';
      console.log(type);

      file.response = '只支持上传pdf格式和图片的文件';
      return false;
    } else {
      const { fileList } = this.state;
      const obj = {
        name: file.name,
        type: file.type,
        isUploading: true,
      };
      fileList.push(obj);
      this.setState({ fileList });
      return true;
    }
  };

  render() {
    const state = { ...this.state };
    const props = {
      name: 'file',
      multiple: false,
      directory: true,
      accept: '.jpg,.jpeg,.png,.pdf',
      // /api/cdcerservice/v1/cerSysteminitImportInfo/imageEscalation
      action: `/api/cdcerserver/v1/riskfactor/importAgreement?user=${this.props.currentUser.id}`,
      headers: {
        authorization: 'authorization-text',
      },
      beforeUpload: this.handleBeforeUpload,
      onChange: info => {
        const { status } = info.file;
        if (status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (status === 'done') {
          const response = info.file.response;

          const { fileList } = info;

          this.setState({
            fileList: [...fileList],
          });
        } else if (status === 'error') {
        }
      },
    };

    return (
      <>
        <Button onClick={this.openModal}> 知情同意书导入</Button>
        <Modal visible={state.visible} onOk={this.closeModel} onCancel={this.closeModel}>
          <span>
            <h3 style={{ color: 'red' }}> 上传说明</h3>
            <h4 style={{ color: 'red' }}>
              1. 上传方式通过拖拽文件夹方式获取批量文件信息，仅限当前文件夹下，不支持子文件夹；
            </h4>
            <h4 style={{ color: 'red' }}>2. 仅支持pdf、jpg、png、jpeg等图片格式；</h4>
            <h4 style={{ color: 'red' }}>3. 文件命名规则：身份证号码.pdf,例如：</h4>
            <h4 style={{ color: 'red' }}>34132394293420394.pdf / 34132394293420394.png;</h4>
          </span>
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <Icon type="inbox" />
            </p>
            <p className="ant-upload-text">点击或者将文件夹拖拽到此处</p>
          </Dragger>
        </Modal>
      </>
    );
  }
}

export default ImgFolderUpload;
